<template>
  <div class="container">
    <!--头部-->
    <header-component/>
    <el-col :span="24" class="main">
      <!--左侧导航-->
      <aside class="aside">
        <el-menu :default-active="defaultActive" style="min-height: 100%;" theme="dark" router>
          <el-menu-item index="HomeIndex"><i class="el-icon-menu"></i>首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-document"></i>管理</template>
            <el-menu-item index="UserList">用户列表</el-menu-item>
            <el-menu-item index="ShopList">商家列表</el-menu-item>
            <el-menu-item index="FoodList">食品列表</el-menu-item>
            <el-menu-item index="OrderList">订单列表</el-menu-item>
            <el-menu-item index="AdminList">管理员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-plus"></i>数据</template>
            <el-menu-item index="AddShop">添加商铺</el-menu-item>
            <el-menu-item index="AddGoods">添加商品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-star-on"></i>图表</template>
            <el-menu-item index="Visitor">用户分布</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-edit"></i>编辑</template>
            <el-menu-item index="VueEdit">文本编辑</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title"><i class="el-icon-setting"></i>设置</template>
            <el-menu-item index="AdminSet">管理员设置</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-warning"></i>说明</template>
            <el-menu-item index="Explain">说明</el-menu-item>
          </el-submenu>
        </el-menu>
      </aside>

      <!--右侧内容区-->
      <section class="content-container">
        <div class="grid-content bg-purple-light">
          <el-col :span="24">
            <keep-alive>
              <router-view>
              </router-view>
            </keep-alive>
          </el-col>
        </div>
      </section>
    </el-col>
  </div>
</template>
<script>
  import HeaderComponent from '../../components/HeaderComponent'

  export default {
    components: {
      HeaderComponent
    },
    computed: {
      defaultActive: function () {
        return this.$route.path.replace('/', '');
      }
    },
  }
</script>
<style lang="stylus" scoped>
  .container {
    position absolute
    top 0
    bottom 0
    width 100%
  }

  .main {
    display flex
    position absolute
    top 50px
    bottom 0
    overflow hidden
  }

  aside {
    min-width 220px
    text-align left
    background #fff
    overflow-y auto
    border-right 1px solid #e6e6e6
  }

  ::-webkit-scrollbar {
    width: 0
  }

  .content-container {
    flex 1
    overflow-y auto
    background #fff
    padding 10px 20px 40px
  }
</style>
